<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>统计图在线生成器_扇形统计图在线生成_条形统计图在线生成,折线图、饼图、曲线图生成</title>
	<meta name="keywords" content="在线统计图,曲线图,折线图,柱状图,饼图,直方图,图表,统计图表" />
	<meta name="description" content="在线统计图表生成器，可以在线生成曲线图、折线图、柱状图饼图等，方便快捷在线生成统计图表" />
	<script src="js/jquery.min.js"></script>
	<script src="js/highcharts/highcharts.js"></script>
	<script src="js/handsontable/jquery.handsontable.full.js"></script>
	<link rel="stylesheet" media="screen" href="js/handsontable/jquery.handsontable.full.css">
	<link rel="stylesheet" media="screen" href="css/style.css">
	<meta name="wlhlauth" content="66438908c4bc0845f331d2d0659ba19e"/>
	<meta name="baidu-site-verification" content="codeva-T0uyq60921" />


</head>
<body>
    <div class="box">
        <h1 style="text-align: center;">在线统计图表生成器</h1>
        <p>这是一个免费的在线生成各种统计图表的工具, 可像 Excel 一样编辑, 然后生成曲线图, 折线图, 柱状图, 饼图, 直方图等多种丰富的统计图表!</p>
        
        
        <div class="box2">
            <h3>表格录入:</h3>
            <div id="data"></div>
            <p>注: 支持从 Excel 表直接复制粘贴表格. 填入数据后, 表格会自动扩展.</p>
        </div>
        
        <div class="box2">
            <h3>样式控制台:</h3>
            <form>
                <fieldset id="form" >
                	<legend>生成图表</legend>
                    	<table>
                    		<tr>
                    			<td>类型:</td>
                    			<td>
                    				<select name="type">
                    					<option value="spline">曲线图</option>
                    					<option value="line">折线图</option>
                    					<option value="column" selected="selected">柱状图(竖柱)</option>
                    					<option value="bar">条形图(横条)</option>
                    					<option value="pie">饼图（扇形图）</option>
                    					<option value="area">面积图</option>
                    					<option value="scatter">XY散点图</option>
                    				</select>
                    			</td>
                    		</tr>
                    		<tr>
                    			<td>标题:</td>
                    			<td>
                    				<input type="text" name="title" value="标题" style="width: 200px;" />
                    			</td>
                    		</tr>
                    		<tr>
                    			<td>Y轴:</td>
                    			<td>
                    				<input type="text" name="ytitle" value="Y轴" style="width: 200px;" />
                    			</td>
                    		</tr>
                    		<tr>
                    			<td>高度:</td>
                    			<td>
                    				<input type="text" name="height" value="400" style="width: 200px;" /> px
                    			</td>
                    		</tr>
                    		<tr>
                    			<td></td>
                    			<td><button>生成图表</button></td>
                    		</tr>
                    	</table>
                </fieldset>
            </form>
        </div>
    </div>
    
<div class="after-box"> 
        <div id="charts" style="width: 98%; margin: 0; padding: 0;"></div>
        <p style="text-align: center;"><a id="download" href="javascript://">下载图片</a></p>

        <script type="text/javascript">
        <!--
        var data = [
        	["X轴", "系列1", "系列2", "系列3"],
        	["a", 12, 3, 1],
        	["b", 7, 21, 3],
        	["c", 23, 31, 9],
        	["d", 23, 31, 9]
        ];
        
        
        if(/firefox\/([\d.]+)/.test(navigator.userAgent.toLowerCase())){
        	HTMLElement.prototype.click = function() {
        		var evt = this.ownerDocument.createEvent('MouseEvents');
        		evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
        		this.dispatchEvent(evt);
        	} 
        }
        
        $("#download").click(function() {
            var svg = $('svg')[0];
            var svg_xml = (new XMLSerializer).serializeToString(svg);
        	var base64 = btoa(unescape(encodeURIComponent(svg_xml)));
            var data_uri = "data:image/svg+xml;base64," + base64;
        
            var image = new Image;
            image.src = data_uri;
            image.onload = function(){
        		var canvas = document.createElement("canvas");
        		canvas.width = image.width;
        		canvas.height = image.height;
        
        		var context = canvas.getContext("2d");
        		context.clearRect(0, 0, image.width, image.height);
        		context.drawImage(image, 0, 0);
        
        		var title = $.trim($('input[name=title]').val());
        		if(title.length == 0){
        			title = 'charts_udpwork_com';
        		}
        		var a = document.createElement("a");
        		a.download = title + ".png";
        		a.href = canvas.toDataURL("image/png");
        		a.target = '_blank';
        		a.click();
           };
        });
        
        
        $(function(){
        	$(document).ready(function() {
        		var table = $('#data').handsontable({
        			minRows: 7,
        			minCols: 8,
        			minSpareRows: 1,
        			minSpareCols: 1,
        			rowHeaders: true,
        			colHeaders: true,
        			data: data
        		}).data('handsontable');
        
        		$('button').click(function(){
        			var height = 0;
        			try{
        				height = parseInt($('input[name=height]').val());
        			}catch(e){}
        			if(height <= 0){
        				height = 400;
        			}
        			$('#charts').height(height);
        			var datagrid = table.getData();
        			var type = $('select[name=type]').val();
        			var title = $('input[name=title]').val();
        			var ytitle = $('input[name=ytitle]').val();
        			show_chart(type, title, ytitle, datagrid);
        			return false;
        		}).click();
        	});
        });
        
        function show_chart(type, title, ytitle, datagrid){
        	var series = [];
        	var xlabels = [];
        	var xtitle = datagrid[0][0];
        
        	for(i=1; i<datagrid[0].length-1; i++){
        		var y = datagrid[0][i];
        		if(y == '' || y == null){
        			break;
        		}
        		series.push({
        			name: y,
        			data: []
        		});
        	}
        	for(i=1; i<datagrid.length-1; i++){
        		var x = datagrid[i][0];
        		if(x == '' || x == null){
        			break;
        		}
        		xlabels.push(x);
        		for(j=1; j<datagrid[i].length-1; j++){
        			if(datagrid[0][j].length == 0){
        				continue;
        			}
        			var y = parseFloat(datagrid[i][j]);
        			if(!isNaN(y)){
        				series[j-1].data.push([x, y]);
        			}else{
        				series[j-1].data.push([x, null]);
        			}
        		}
        	}
        	var tmp = [];
        	for(i=0; i<series.length; i++){
        		if(series[i].data.length > 0){
        			tmp.push(series[i]);
        		//	alert(series[i].data);
        		}
        	}
        	series = tmp;
        	//alert(xlabels);
        	//alert(series[0].data);
        
        	$('#charts').html('');
        	var charts = new Highcharts.Chart({
        		chart: {
        			renderTo: 'charts',
        			type: type
        		},
        		title: {
        			text: title
        		},
        		subtitle: {
        			text: ''
        		},
        		xAxis: {
        			title: {
        				text: xtitle,
        				style: {
        					color: '#666',
        					"font-size": '120%'
        				}
        			},
        			categories: xlabels,
        			min: 0, //
        			//minRange: 1,
        			minPadding: 1, //
        			labels: {
        				formatter: function() {
        					return this.value + '';
        				}
        			}
        		},
        		yAxis: {
        			title: {
        				text: ytitle,
        				style: {
        					color: '#666',
        					"font-size": '120%'
        				}
        			},
        			labels: {
        				formatter: function() {
        					return this.value;
        				}
        			}
        		},
        		tooltip: {
        			enabled: true,
        			formatter: function() {
        				return this.series.name + ': '+this.y +''; //
        			}
        		},
        		plotOptions: {
        			series:{
        				connectNulls: true
        			},
        			line: {
        				dataLabels: {
        					enabled: true
        				},
        				enableMouseTracking: true
        			},
        			spline: {
        				dataLabels: {
        					enabled: true
        				}
        			},
        			bar: {
        				dataLabels: {
        					enabled: true
        				}
        			},
        			column: {
        				dataLabels: {
        					enabled: true
        				}
        			},
        			area: {
        				dataLabels: {
        					enabled: true
        				}
        			},
        			pie: {
        				allowPointSelect: true,
        				showInLegend: true,
        				dataLabels: {
        					enabled: true,
        					formatter: function() {
        						var p = this.percentage + '';
        						var pos = p.indexOf('.');
        						if(pos != -1){
        							p = p.substr(0, pos + 2);
        						}
        						return '<b>'+ this.point.name +'</b>: ' + p +' %';
        					}
        				}
        			}
        		},
        		series: series
        	});
        }
        
        //-->
        </script>
        <div style="font-size: 12px; margin-top: 50px; text-align: center;">
        	Copyright &copy; 2013-2022 <b><a href="index.html">niwoyiqi.com</a></b>. All rights reserved.
        </div>
</div>

</body>
</html>
